<template>
  <div>
    <a-form ref="queryPostFormRef" name="queryPostForm" :model="queryPostForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="postCode" label="岗位编码">
            <a-input v-model:value="queryPostForm.data.postCode" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="postName" label="岗位名称">
            <a-input v-model:value="queryPostForm.data.postName" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="status" label="岗位状态">
            <a-select v-model:value="queryPostForm.data.status" :options="pageData.sysNormalDisableDict" allowClear> </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <a-button type="primary" @click="openPostAddModal()" v-hasPermi="['system:post:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
          <a-button type="primary" danger @click="clickDeletePost()" :disabled="postTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:post:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="postTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetPostQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="postId"
      :columns="postTableData.columns"
      :data-source="postTableData.dataSource"
      :loading="postTablePage.loading.value"
      :pagination="postTablePagination"
      @change="postTableHandChangePage"
      :row-selection="{ selectedRowKeys: postTableData.selectedRowKeys, onChange: onPostTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysNormalDisableDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'postTableOperateCol'">
          <span>
            <a @click="openPostDetailModal(record)"> 查看 </a>
            <a-divider type="vertical" v-hasPermi="['system:post:edit']" />
            <a @click="openPostUpdateModal(record)" v-hasPermi="['system:post:edit']"> 修改 </a>
          </span>
        </template>
      </template>
    </a-table>

    <PostAddUpdateModal ref="postAddUpdateModalRef" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
    <PostDetailModal ref="postDetailModalRef" :sysNormalDisableDict="pageData.sysNormalDisableDict" />
  </div>
</template>

<script setup name="Post">
import { listPost, getPost, delPost, addPost, updatePost } from '@/api/system/post';
import PostAddUpdateModal from './addUpdateModal.vue';
import PostDetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  sysNormalDisableDict: [],
});

AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageData.sysNormalDisableDict = res;
});

// 查询Form
const queryPostFormRef = ref();
const queryPostForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetPostQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryPostForm.data);
  postTablePage.reload();
};

// 打开新增窗口
const postAddUpdateModalRef = ref();
const openPostAddModal = () => {
  postAddUpdateModalRef.value.openAddModal(postTablePage);
};

// 打开修改窗口
const openPostUpdateModal = (record) => {
  postAddUpdateModalRef.value.openUpdateModal(record, postTablePage);
};

// 打开详细窗口
const postDetailModalRef = ref();
const openPostDetailModal = (record) => {
  postDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeletePost = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delPost(postTableData.selectedRowKeys).then((res) => {
      AutoeeUtil.messageSuccess('删除操作成功。');
      postTablePage.reload();
    });
  });
};

// 列表数据
const postTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '岗位编码',
      key: 'postCode',
      dataIndex: 'postCode',
    },
    {
      title: '岗位名称',
      key: 'postName',
      dataIndex: 'postName',
    },
    {
      title: '显示顺序',
      key: 'postSort',
      dataIndex: 'postSort',
    },
    {
      title: '岗位状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'postTableOperateCol',
      width: 100,
    },
  ],
});

// 查询列表
const queryPostList = () => {
  return listPost(queryPostForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const postTablePage = AutoeeUtil.usePagination(queryPostList, postTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const postTablePagination = computed(() => AutoeeUtil.getTablePagination(postTablePage));

// 手动翻页方法
const postTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(postTablePage, page, filters, sorter);
};

// 列表选中方法
const onPostTableSelectChange = (selectedRowKeys) => {
  postTableData.selectedRowKeys = selectedRowKeys;
};
</script>
<style lang="less"></style>
